import BasicLayout from "@/components/BasicLayout";
import gqlError from "@/hooks/gqlError";
import useMutation from "@/hooks/useMutation";
import { Button, Rate, TextArea } from "@nutui/nutui-react-taro";
import { View } from "@tarojs/components";
import Taro from "@tarojs/taro";
import { useLoad } from "@tarojs/taro";
import gql from "graphql-tag";
import { useCallback, useState } from "react";


const CommentMutation = gql`
    mutation Comment($rate:Int!,$context:String!,$id:Int!){
        comment(rate:$rate,context:$context,id:$id){
            id
        }
    }
`
export default function Index() {
    const [comment] = useMutation(CommentMutation, {
        onCompleted() {
            Taro.navigateTo({ url: '/pages/MyComment/index' });
        },
        onError(error) {
            gqlError(error)
        },
    })
    const [id, setId] = useState(0);
    useLoad(({ id }) => {
        setId(Number(id));
    })
    const [rate, setRate] = useState(5);
    const [context, setContext] = useState("");
    const onFinish = useCallback(() => {
        comment({
            id,
            rate,
            context
        })
    }, [rate, context, id]);
    return (
        <BasicLayout>
            <View className="flex justify-center mt-5 mb-5">
                <Rate value={rate} onChange={setRate} />
            </View>
            <TextArea value={context} onChange={setContext} />
            <View className="flex justify-center mt-5 mb-5">
                <Button onClick={onFinish}>发表评论</Button>
            </View>
        </BasicLayout>
    )
}